<template>
  <div class="detail-wrap">
    <form-view class="bbx-cell-form-view bbx-form-item" :fields="formFields" :value="{}" :form-cell-count="formCellCount">
      <template slot="no" slot-scope="{ field }">
        <div class="form-view-row bbx-form-cell-item">
          <label>{{ field.displayName }}</label>
          <div class="form-view-row-content">{{ memberInfo.cardNo }}</div>
        </div>
      </template>
      <template slot="name" slot-scope="{ field }">
        <div class="form-view-row bbx-form-cell-item">
          <label>{{ field.displayName }}</label>
          <div class="form-view-row-content">
            <a href="" class="view-detail-btn" @click.stop.prevent="handleOpenCustomerTab(memberInfo)">
              {{ memberInfo.customerName }}
            </a>
          </div>
        </div>
      </template>
      <template slot="cNo" slot-scope="{ field }">
        <div class="form-view-row bbx-form-cell-item">
          <label>{{ field.displayName }}</label>
          <div class="form-view-row-content">{{ memberInfo.customerSerialnumber }}</div>
        </div>
      </template>
      <template slot="userTable" slot-scope="{ field }">
        <div class="form-view-row bbx-form-item">
          <div class="last-field">
            <div>
              <el-button type="primary" @click="addAuthorization">{{ $t('common.member.addLicensor') }}</el-button>
            </div>
            <el-table :data="authorizationList" :highlight-current-row="false" border ref="multipleTable" header-row-class-name="common-list-table-header">
              <template v-for="(column, index) in authoriseColumns">
                <el-table-column :key="`${column.field}_${index}`" :label="column.label" :prop="column.field" :min-width="column.minWidth || '120px'" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <template v-if="column.field === 'main'">
                      {{ getName(scope.row[column.field]) }}
                    </template>
                    <template v-else-if="column.field === 'createTime'">
                      {{ scope.row[column.field] | formatTime }}
                    </template>
                    <template v-else-if="column.field === 'action'">
                      <el-button v-if="!scope.row['main']" type="text" @click="cancelAuthorization(scope.row)">
                        {{ $t('common.base.cancel') }}
                      </el-button>
                    </template>
                    <template v-else>
                      <div>
                        {{ scope.row[column.field] }}
                      </div>
                    </template>
                  </template>
                </el-table-column>
              </template>
            </el-table>
          </div>
        </div>
      </template>
      <template slot="cardTypeName" slot-scope="{ field }">
        <div class="form-view-row bbx-form-cell-item">
          <label>{{ field.displayName }}</label>
          <div class="form-view-row-content">{{ memberInfo.cardTypeName }}</div>
        </div>
      </template>
      <template slot="enabled" slot-scope="{ field }">
        <div class="form-view-row bbx-form-cell-item">
          <label>{{ field.displayName }}</label>
          <div class="form-view-row-content">{{ memberInfo.enabled ? $t('common.base.enable') : $t('common.base.disable') }}</div>
        </div>
      </template>
    </form-view>

    <base-modal :title="$t('common.member.addLicensor')" :show.sync="visible" width="524px" :close-on-click-modal="false">
      <div class="add-authorization-dialog">
        <el-form ref="editFormRef" :model="editForm" :rules="rules" label-position="top" class="edit-form">
          <el-form-item :label="$t('common.member.licensor')" prop="value">
            <div>
              <el-select v-model="editForm.value" clearable :placeholder="$t('common.base.pleaseSelect')">
                <el-option v-for="item in linkmanList" :key="item.id" :label="item.name" :value="item.id"> </el-option>
              </el-select>
            </div>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="visible = false">{{ $t('common.base.cancel') }}</el-button>
        <el-button type="primary" @click="handleConfirm">{{ $t('common.base.makeSure') }}</el-button>
      </div>
    </base-modal>
  </div>
</template>

<script>
import { authoriseColumns } from '@src/modules/member/field.js';
import { searchMemberShipAuthorization, deleteMemberShipAuthorization, getLinkmanList, addMemberShipAuthorization, getMemberConfig } from '@src/api/Member';
import { openAccurateTab } from '@src/util/platform';
import { PageRoutesTypeEnum } from 'pub-bbx-global/pageType/dist/enum/PageRoutesEnum';
import dayjs from 'dayjs';
import { t } from '@src/locales';
export default {
  name: 'member-detail',
  props: {
    memberInfo: {
      type: Object,
      default: {},
    },
    authorizationList: {
      type: Array,
      default: [],
    },
    formCellCount:{
      type:Number,
      default :1
    }
  },
  data() {
    return {
      authoriseColumns,
      visible: false,
      editForm: {
        value: '',
      },
      rules: {
        value: [{ required: true, message: this.$t('common.member.selectLicensor'), trigger: 'change' }],
      },
      linkmanList: [],
      formFields: [
        { fieldName: 'no', displayName: t('common.member.memberNo') },
        { fieldName: 'cardTypeName', displayName: t('common.member.cardType') },
        { fieldName: 'enabled', displayName: t('common.member.enabled') },
        { fieldName: 'name', displayName: t('common.fields.customerName.displayName') },
        { fieldName: 'cNo', displayName: t('common.fields.customerNo.displayName') },
        { fieldName: 'user', placeHolder: `<span class="font-w-600">${t('common.member.licensor')}</span>`, formType:'info' },
        { fieldName: 'userTable', displayName: '' },
      ],
    };
  },
  filters: {
    formatTime(time) {
      if (!time) return;
      return dayjs(time).format('YYYY-MM-DD HH:mm:ss');
    },
  },
  mounted() {
    this.handleGetMemberConfig()
  },
  methods: {
    handleGetMemberConfig() {
      getMemberConfig().then(res => {
        if (!res?.data?.multiMembershipCard) {
          this.formFields = this.formFields.filter(v => v.fieldName != 'cardTypeName')
        }
      })
    },
    handleOpenCustomerTab(row) {
      let fromId = window.frameElement.getAttribute('id');
      let customerId = row.customerId;
      if (!customerId) return;
      openAccurateTab({
        type: PageRoutesTypeEnum.PageCustomerView,
        key: customerId,
        params: 'noHistory=1',
        fromId,
      });
    },
    async addAuthorization() {
      let params = {
        memberShipId: this.memberInfo.id,
      };
      let { code, result, message } = await getLinkmanList(params);
      if (code !== 0) return this.$message.error(message);
      if (result.length == 0) return this.$message.warning(this.$t('member.detail.title31'));
      this.visible = true;
      this.linkmanList = result;
    },
    cancelAuthorization(val) {
      this.$confirm(this.$t('common.member.comfirmText'), this.$t('common.base.toast'), {
        confirmButtonText: this.$t('common.base.makeSure'),
        cancelButtonText: this.$t('common.base.cancel'),
        type: 'warning',
      }).then(async () => {
        const { code, message } = await deleteMemberShipAuthorization({ id: val.id });
        if (code !== 0) return this.$message.error(message);
        this.$message.success(this.$t('common.member.cancelText'));
        // 抛出事件
        this.$emit('updatePage');
      });
    },
    handleConfirm() {
      this.$refs.editFormRef.validate(async valid => {
        if (valid) {
          let params = {
            memberShipId: this.memberInfo.id,
            linkmanId: this.editForm.value,
          };
          let { code, result, message } = await addMemberShipAuthorization(params);
          if (code !== 0) return this.$message.error(message);
          this.visible = false;
          this.$refs.editFormRef?.resetFields();
          this.$emit('updatePage');
        }
      });
    },
    getName(val) {
      if (!val) return this.$t('common.member.deputyLicensor');

      return this.$t('common.member.principalLicensor');
    },
  },
};
</script>

<style lang="scss" scoped>
.detail-wrap {
  padding:16px;
  .view-detail-btn {
    @include fontColor();
  }

  > div {
    display: flex;
    font-size: 14px;
    line-height: 32px;
    .field-name {
      width: 120px;
    }
  }
  .authorization {
    width: 100%;
    height: 48px;
    padding-left: 16px;
    line-height: 48px;
    background: #faf9fa;
  }
  .last-field {
    width: 100%;
    display: block;
    .main-linkman {
      display: flex;
    }
  }
  .add-authorization-dialog {
    .el-select {
      width: 100%;
    }
  }
}
</style>
